<template>
  <div>
    <section>
      <Row>
        <database titleLabel="源数据库" :dbIndex="source.dbIndex" :schema="source.schema" inline @schemaChanged="onSourceSchemaChanged" />
        <database titleLabel="目标数据库" :dbIndex="target.dbIndex" :schema="target.schema" inline @schemaChanged="onTargetSchemaChanged" />
        <Col :span="5">
          <ButtonGroup shape="circle">
            <Button type="primary" icon="ios-play" @click="onBeginCompare">开始比较</Button>
            <Button type="success" icon="ios-flash" @click="onBuildScripts" :disabled="!canBuildScript">生成脚本</Button>
          </ButtonGroup>
        </Col>
      </Row>
    </section>
    <Row :gutter="10" v-show="comparedResults.source">
      <Col :span="7">
        <panel icon="md-apps" title="需要添加的表" type="success" :maxHeight="detailHeight / 3">
          <div slot="extra">
            <Switch v-model="selectAllAdds" size="large" style="margin-right: 10px;">
              <span slot="open">全部</span>
              <span slot="close">取消</span>
            </Switch>
            <Badge :count="(comparedResults.adds || []).length" type="primary" :show-zero="true"></Badge>
          </div>
          <p v-for="item of comparedResults.adds">
            <Switch v-model="item.Checked" /> {{ item.name }} <i v-if="item.comment">({{ item.comment }})</i>
          </p>
        </panel>
        <panel icon="md-apps" style="margin-top: 5px" title="需要修改的表" type="success" :maxHeight="detailHeight / 3 + 26">
          <div slot="extra">
            <Switch v-model="selectAllChangeds" size="large" style="margin-right: 10px;">
              <span slot="open">全部</span>
              <span slot="close">取消</span>
            </Switch>
            <Badge :count="(comparedResults.changeds || []).length" type="primary" :show-zero="true"></Badge>
          </div>
          <p v-for="item of comparedResults.changeds">
            <Switch v-model="item.Checked" /> {{ item.table }} <i v-if="item.comment">({{ item.comment }})</i>
          </p>
        </panel>
        <panel icon="md-apps" style="margin-top: 5px" title="可以删除的表" type="warning" :maxHeight="detailHeight / 3 - 30">
          <div slot="extra">
            <Switch v-model="selectAllRemoves" size="large" style="margin-right: 10px;">
              <span slot="open">全部</span>
              <span slot="close">取消</span>
            </Switch>
            <Badge :count="(comparedResults.removes || []).length" :show-zero="true"></Badge>
          </div>
          <p v-for="item of comparedResults.removes">
            <Switch v-model="item.Checked" /> {{ item.name }} <i v-if="item.comment">({{ item.comment }})</i>
          </p>
        </panel>
      </Col>
      <Col :span="17">
        <panel icon="md-code" title="生成的脚本" type="primary" :enableToggle="false" :maxHeight="detailHeight" class="sql-script">
          <ButtonGroup shape="circle" slot="extra">
            <Button icon="md-copy" type="success" :disabled="!scripts.length" @click="onCopyScript">复制脚本</Button>
          </ButtonGroup>
          <pre ref="scripts"><template v-for="item of scripts">{{item}}<br v-if="item" /></template></pre>
        </panel>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  components: {
    database: () => import('./components/Database.vue')
  },
  data() {
    return {
      detailHeight: 540,
      canBuildScript: false,
      selectAllAdds: true,
      selectAllChangeds: true,
      selectAllRemoves: false,
      source: {
        dbIndex: '0',
        schema: ''
      },
      target: {
        dbIndex: '0',
        schema: ''
      },
      comparedResults: {},
      scripts: []
    };
  },
  watch: {
    selectAllAdds(n) {
      (this.comparedResults.adds || []).forEach(item => (item.Checked = n));
    },
    selectAllChangeds(n) {
      (this.comparedResults.changeds || []).forEach(item => (item.Checked = n));
    },
    selectAllRemoves(n) {
      (this.comparedResults.removes || []).forEach(item => (item.Checked = n));
    }
  },
  methods: {
    onSourceSchemaChanged(data) {
      this.source.type = data.type;
      this.source.schema = data.schema;
      this.source.dbIndex = data.dbIndex;
    },
    onTargetSchemaChanged(data) {
      this.target.type = data.type;
      this.target.schema = data.schema;
      this.target.dbIndex = data.dbIndex;
    },
    onBeginCompare() {
      if (this.source.dbIndex == this.target.dbIndex && this.source.schema == this.target.schema) {
        this.$Message.warning('源数据库和目标数据库相同，请选择不同的数据库再作比较！');

        return;
      }

      if (this.source.type != this.target.type) {
        this.$Message.warning(`源数据库(${this.source.type})和目标数据库类型(${this.target.type})不同，暂不支持不同类型的数据库比较！`);

        return;
      }

      this.scripts = [];
      this.selectAllAdds = true;
      this.selectAllChangeds = true;
      this.selectAllRemoves = false;
      this.canBuildScript = false;

      this.$http.get(`/api/db/tools/${this.source.dbIndex}/${this.source.schema}/compare/${this.target.dbIndex}/${this.target.schema}`, { spinText: '正在比较中，请稍后...' }).then(res => {
        this.comparedResults = res;
        this.canBuildScript = true;

        (this.comparedResults.adds || []).forEach(item => (item.Checked = true));
        (this.comparedResults.changeds || []).forEach(item => (item.Checked = true));
        (this.comparedResults.removes || []).forEach(item => (item.Checked = false));
      });
    },
    onBuildScripts() {
      if (this.comparedResults.source) {
        let submitDatas = {
          source: this.comparedResults.source,
          target: this.comparedResults.target,
          adds: (this.comparedResults.adds || []).filter(item => item.Checked),
          changeds: (this.comparedResults.changeds || []).filter(item => item.Checked),
          removes: (this.comparedResults.removes || []).filter(item => item.Checked)
        };

        this.$http.post('/api/db/tools/ddl/build', submitDatas, { spinText: '脚本生成中，请稍后...' }).then(res => {
          this.scripts = res;
        });
      }
    },
    onCopyScript() {
      this.$copyText(this.$refs.scripts.innerText).then(() => {
        this.$Message.success('脚本已复制！');
      });
    },
    ResizeDetailPanel(area) {
      this.detailHeight = area.height - 53;
    }
  },
  mounted() {
    let area = this.getClientArea();

    this.ResizeDetailPanel(area);
    this.$bus.on('windowResizeChanged', client => this.ResizeDetailPanel(client));
  }
};
</script>

<style lang="less" scoped>
.ivu-card-head {
  .ivu-switch {
    top: 0;
  }
}

.ivu-card-body {
  p {
    font-size: 14px;
    font-weight: bold;
    padding: 8px 0 8px 0;
    border-bottom: 1px solid #c0b9b9;

    & > i {
      font-weight: normal;
    }
  }

  p:last-of-type {
    border-bottom: 1px solid transparent;
  }
}

.sql-script {
  .ivu-card-body {
    font-size: 13px;
    background-color: #c0c0c0;
  }
}
</style>
